<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 当点击按钮，会调用fn1方法 -->
        <button v-on:click="fn1">点我啊</button>

        <!-- 注意：如果这一句代码是调用window对象里的方法，是不允许的 -->
        <!-- <button v-on:click="alert('点我干啥')">点我啊</button> -->
        <button v-on:click="fn2">让count+1</button>
        <!-- 如果事件里要执行的代码只有一句话，那么也可以写到html行内 -->
        <!-- 如果是在html中访问vue里的变量，那么前面不用加this -->
        <button v-on:click="count++">让count+1</button>

        <hr>
        <!-- 有没有觉得每次前面写 v-on: 很麻烦 -->
        <!-- 简写形式： @事件名 -->
        <button @click="fn2">让count+1</button>
        <button @click="count++">让count+1</button>
        
        <p>count的值是： {{ count }}</p>

    </div>

    <script src="./vue.js"></script>

    <script>
        new Vue({
            el: '#app',
            data: {
                count: 0
            },
            // vue里声明方法的地方
            methods: {
                fn1 () {
                    alert('点我干啥')
                },

                // 在vue里的js代码中，访问vue的变量前面要加this
                fn2 () {

                    this.count++
                }
            }
        })
    </script>
</body>
</html>